<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
      </main>
    </div>
    <script src="./util.js"></script>
    <script>
      let dataInfo = [];
      window.onload = async function () {
        let res = await Pajax({
          url: "http://localhost:3000/dataInfo",
        });
        console.log(res);
        localStorage.setItem("dataInfo", JSON.stringify(res));
        dataInfo = JSON.parse(localStorage.getItem("dataInfo"));
        updateDom(arr);
      };
      //获取右边展示用的盒子
      var main = document.querySelector("#main");

      //获取五个按钮
      var add_btn = document.querySelector("#add-user");
      var double_btn = document.querySelector("#double");
      var query_btn = document.querySelector("#show-millionaire");
      var most_btn = document.querySelector("#sort");
      var total_btn = document.querySelector("#calculate");
      //---
      //添加用户
      // var arr = [];
      var arr = JSON.parse(localStorage.getItem("arr")) || [];
      var num = 0; //数组第一个元素的下标
      add_btn.addEventListener("click", addfn);
      function addfn() {
        //点击一次 渲染一个对象，点第二次的时候，前一次的数据要保留
        // 多个数据 有序 ->用数组存放
        //点一次push到新数组中
        //遍历渲染
        arr.push(dataInfo[num]);
        num++;
        updateDom(arr);
      }
      //渲染用的函数
      function updateDom(arr) {
        //arr里面装的是我要渲染用的数据
        main.innerHTML = `
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
        `;
        //把上一次的清除

        //遍历数组，渲染到页面上
        arr.forEach(function (item, index) {
          //item就是你要渲染的每个对象
          var div = document.createElement("div");
          div.classList.add("person");
          div.innerHTML = `
                <strong>${item.name}</strong>
                ${formatMoney(item.money)}
          `;
          main.appendChild(div);
        });
        localStorage.setItem("arr", JSON.stringify(arr));
      }
      //翻倍
      double_btn.addEventListener("click", doublefn);
      function doublefn() {
        //要翻倍的是 新的arr中的对象中的money属性
        // //方法一 forEach
        // arr.forEach(function (item) {
        //   item.money *= 2;
        // });
        // updateDom(arr);

        //方法二 map+ ...扩展运算符
        arr = arr.map(function (item) {
          return { ...item, money: item.money * 2 };
        });
        updateDom(arr);
      }
      //查询
      query_btn.addEventListener("click", queryfn);
      function queryfn() {
        //money>=100W才留下来
        arr = arr.filter(function (item) {
          return item.money >= 1000000;
        });
        updateDom(arr);
        // console.log(arr);
      }
      //排序
      most_btn.addEventListener("click", mostfn);
      function mostfn() {
        arr = arr.sort(function (a, b) {
          return b.money - a.money;
        });
        updateDom(arr);
      }
      //总额
      total_btn.addEventListener("click", totalfn);
      function totalfn() {
        //计算总金额
        var acc = arr.reduce(function (prev, item, index) {
          return (prev += item.money);
        }, 0); //千万记得初始化一个0
        var div = document.createElement("div");
        div.innerHTML = `<h2><strong>Total sum:</strong>${formatMoney(
          acc
        )}</h2>`;
        main.appendChild(div);
      }
      //格式化金钱
      function formatMoney(money) {
        // //调用数字对象上的一个方法
        // var res = money.toLocaleString();
        // return "$" + res + ".00";

        //方法二
        // arr=[123456]
        //  123,456
        //每循环第三次的时候，并且不是第0个元素，就在插入一个 逗号(,)
        var res;
        var arr = money.toString().split("");
        var newArr = [];
        var count = 0; //记录循环了几次
        for (var i = arr.length - 1; i >= 0; i--) {
          count++;
          newArr.unshift(arr[i]); //拿旧数组的最后一个元素 去插入到新数组的最前面
          if (count % 3 === 0 && i != 0) {
            newArr.unshift(",");
          }
        }
        return "$" + newArr.join("") + ".00";
      }
      //侧边导航栏
      var nav_btn = document.querySelector("#toggle");
      nav_btn.addEventListener("click", function () {
        /* 
            面试必问：涉及到性能优化
            1. 改变width  0=>200px =>改变了盒子的结构=>引起浏览器的重排(回流) 重新渲染  n个盒子都重新绘制
            2. 通过transform来做 或者改变一下背景色 =>只是改变盒子的外观=>引起浏览器的重新绘制(重绘) 只需要重新渲染改变的那个盒子
            */
        document.body.classList.toggle("show_nav");
      });
    </script>
  </body>
</html>
